<template>
  <div class="container">
    <div class="h80"></div>
    <div class="time_choose flex">
      <picker
        class="flex-item"
        mode="date"
        :value="time_start"
        start="1900-01-01"
        end="2099-12-31"
        @change="bindTimeStartChange"
      >
        <view class="picker">{{time_start}}</view>
      </picker>
      <span class="division">~</span>
      <picker
        class="flex-item"
        mode="date"
        :value="time_end"
        start="1900-01-01"
        end="2099-12-31"
        @change="bindTimeEndChange"
      >
        <view class="picker">{{time_end}}</view>
      </picker>
    </div>
  </div>
</template>

<script>
// Use Vuex
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      orcode: '',
      time_start: '',
      time_end: '',
      start_time_js: '',
      end_time_js: '',
      list: '',
      warnmsg: '',
      allfeat: 0
    }
  },
  async onLoad () {
    this.orcode = wx.getStorageSync('userInfo').orcode;
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();
    this.time_start = year + '-' + month + '-' + day;
    this.time_end = year + '-' + month + '-' + day;
    this.start_time_js = moment(this.time_start, 'YYYY-MM-DD').unix();
    this.end_time_js = moment(this.time_end + ' ' + '23:59:59', 'YYYY-MM-DD HH-mm').unix();
    await Promise.all([
      this.get_charts_data()
    ])
  },
  computed: {
  },
  methods: {
    async get_charts_data () {
      const res = await api.getyeji({ orcode: this.orcode, startTime: this.start_time_js, endTime: this.end_time_js });
      console.log(res)
    },
    bindTimeStartChange (e) {
      this.time_start = e.mp.detail.value;
      this.start_time_js = moment(this.time_start, 'YYYY-MM-DD').unix();
    },
    bindTimeEndChange (e) {
      this.time_end = e.mp.detail.value;
      this.end_time_js = moment(this.time_end, 'YYYY-MM-DD').unix();
      if (this.end_time_js < this.start_time_js) {
        Toast('结束时间不能小于开始时间', 'noicon');
        return false;
      }
      this.get_charts_data();
    }
  }
}
</script>

<style scoped>
.h80 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80rpx;
  background: RGBA(255, 68, 68, 1);
  z-index: 1;
}
.time_choose {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  margin-top: 50rpx;
  width: 430rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 20px rgba(255, 68, 68, 0.1);
  opacity: 1;
  border-radius: 52px;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 64rpx;
  color: rgba(51, 51, 51, 1);
}
.picker {
  text-align: center;
}
.division {
  display: inline;
  position: relative;
  top: 10rpx;
}
</style>
